<script setup>
import { ref, onMounted } from 'vue'
import { useMenuStore } from '@/stores/menuStore.js'

const menuStore = useMenuStore()
const menuTree = ref([])

// 加载菜单树
const loadMenuTree = async () => {
  await menuStore.getMenuTree()
  menuTree.value = menuStore.menuTree
}

// 初始化加载数据
onMounted(() => {
  loadMenuTree()
})

// 【新增】定义props和emits
const props = defineProps({
  data: Array
})

const emit = defineEmits(['edit', 'detail'])

// 【新增】树形配置
const defaultProps = {
  children: 'children',
  label: 'name'
}

// 【新增】节点点击处理
const handleNodeClick = (data) => {
  emit('detail', data.id)
}

// 定义树形表格列
const columns = [
  {
    label: '菜单名称',
    prop: 'name',
    width: 200
  },
  {
    label: '图标',
    prop: 'icon',
    width: 100,
    render: (row) => row.icon ? `<i class="${row.icon}"></i>` : '-'
  },
  {
    label: '路径',
    prop: 'path',
    width: 200
  },
  {
    label: '排序',
    prop: 'sort',
    width: 80
  }
]
</script>

<template>
  <el-card shadow="never">
    <!-- 【改进】使用El-Tree展示带操作的树形结构 -->
    <el-tree
        :data="data"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>
            <i v-if="data.icon" :class="data.icon" style="margin-right: 5px"></i>
            {{ node.label }}
          </span>
          <span>
            <el-button type="text" @click.stop="emit('detail', data.id)">详情</el-button>
            <el-button type="text" @click.stop="emit('edit', data)">编辑</el-button>
          </span>
        </span>
      </template>
    </el-tree>
  </el-card>
<!--  <div class="menu-tree-container">-->
<!--    <el-card shadow="never">-->
<!--      <template #header>-->
<!--        <div class="card-header">-->
<!--          <span>菜单树形结构</span>-->
<!--          <el-button type="primary" size="small" @click="loadMenuTree">刷新</el-button>-->
<!--        </div>-->
<!--      </template>-->

<!--      <el-table-->
<!--          :data="menuTree"-->
<!--          row-key="id"-->
<!--          border-->
<!--          default-expand-all-->
<!--          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"-->
<!--      >-->
<!--        <el-table-column-->
<!--            v-for="col in columns"-->
<!--            :key="col.prop"-->
<!--            :prop="col.prop"-->
<!--            :label="col.label"-->
<!--            :width="col.width"-->
<!--            v-bind="col"-->
<!--        >-->
<!--          <template #default="{ row }" v-if="col.render">-->
<!--            <span v-html="col.render(row)"></span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column label="操作" width="150">-->
<!--          <template #default="{ row }">-->
<!--            <el-button type="text" size="small">编辑</el-button>-->
<!--            <el-button type="text" size="small" style="color: #f56c6c">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </el-card>-->
<!--  </div>-->
</template>

<style scoped>
.menu-tree-container {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 【新增】树节点样式 */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}
</style>